<template>
  <div class="mv">
    <span class="iconfont icon-arrow-left-bold" @click="$router.go(-1)"></span>
    <video :src="mvUrl.url" width="100%" autoplay controls></video>

    <van-tabs v-model="activeName">
      <van-tab title="详情推荐" name="a">
        <div class="img-name">
          <div class="img"><img :src="mvData.cover" alt="" /></div>
          <div class="name">{{ mvData.artistName }}</div>
        </div>
        <div class="nav">
          <h2>{{ mvData.name }}</h2>
        </div>
        <div class="time-play">
          <span>发布时间: {{ mvData.publishTime }}</span>
          <span
            >播放:
            {{
              mvData.playCount > 10000
                ? mvData.playCount / 10000 + "万"
                : mvData.playCount
            }}次</span
          >
        </div>
        <div class="btn">
          <span
            :class="[
              'iconfont',
              flg == 1 ? 'icon-dianzan_kuai' : 'icon-dianzan',
            ]"
            @click="flg = !flg"
            style="color: black"
          ></span>
          <span @click="flg2 = !flg2">{{ flg2 ? "已收藏" : "收藏" }}</span>
          <span>分享</span>
          <span>下载MV</span>
        </div>
        <div class="mv-list">
          <van-cell
            center
            class="swiper-slide"
            v-for="(item, index) in mvList"
            :key="index"
            @click="playMv(item.id)"
          >
            <template #icon>
              <div class="img"><img :src="item.cover" alt="" /></div>
            </template>
            <template #title>
              <span class="songName">{{ item.artists[0].name }}-</span><span>{{item.name}}</span>
            </template>
          </van-cell>
        </div>
      </van-tab>
      <van-tab title="评论" name="b" class="comment">
        <div class="bottom">
          <div class="int">
            <input
              placeholder="想说的话,可以留在这里"
              type="text"
              v-model="value"
            />
          </div>
          <div @click="addComment" class="btn-text">发送</div>
        </div>
        <ul>
          <li v-for="(item, index) in comment" :key="index">
            <div class="img">
              <img
                :src="item.user.avatarUrl"
                alt=""
                width="100%"
                height="100%"
              />
            </div>
            <div class="text">
              <div class="title">
                <div class="name-time">
                  <div class="name">{{ item.user.nickname }}</div>
                  <div class="time">{{ item.time | time }}</div>
                </div>
                <div class="zan">
                  {{ item.likedCount }}
                  <!-- <van-icon
                  :name="[flgData[item.index] ? 'good-job' :'good-job-o']"
                  @click="add(item.index)"
                /> -->
                  <span
                    :class="[
                      'iconfont',
                      item.liked ? 'icon-dianzan_kuai' : 'icon-dianzan',
                    ]"
                    @click="add(item.commentId, item.liked)"
                  ></span>
                </div>
              </div>
              <div class="comm">
                <div class="t1">
                  {{ item.content }}
                </div>
                <div class="t2"></div>
              </div>
            </div>
          </li>
        </ul>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  getMvData,
  getMvList,
  getMvUrl,
  collectionMv,
  dainZan,
  getInfo,
  getComment,
  dainZanPl,
} from "../api/mv"
import {setComment } from "../api/comment";
export default {
  data() {
    return {
      mvUrl: {
        url: "",
      },
      mvData: { cover: "" },
      mvList: null,
      flg: 0,
      flg2: false,
      comment: null,
      flgData: [],
      activeName: "a",
      value: "",
      mvId:null,
    };
  },
  methods: {
    playMv(id) {
      // this.$router.push({path:'/mv',query: { id}})
      // console.log(this.$route.query.id,id);
      // this.$route.query.id=id
      this.mvId=id
    },
    add(cid, t) {
      // this.flgData.splice(index,1,!this.flgData[index])
      let id = this.$route.query.id;
      dainZanPl({
        id,
        cid,
        t: !t,
        type: 1,
      }).then((data) => {
        console.log(data);
      });
    },
     //评论mv
    addComment() {
      let id = this.$route.query.id;
      setComment({
        t: 1,
        type: 1,
        id,
        content: this.value,
      }).then((data) => {
        console.log(data);
      });
      this.value=''
    },
  },
  created() {
    this.mvId=this.$route.query.id
   
    this.$emit("get-player-id", null);
  },
  beforeDestroy() {
    collectionMv({
      id: this.$route.query.id,
      t: this.flg2,
    }).then((data) => {
      if (data.code == 200) {
        console.log("收藏成功");
      }
    });
    dainZan({
      id: this.$route.query.id,
      type: 1,
      t: this.flg,
    }).then((data) => {
      console.log(data);
      if (data.code == 200) {
        console.log("点赞成功");
      }
    });
  },
  // 过滤器
  filters: {
    time(value) {
      var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000

      let Y = date.getFullYear() + "年";

      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "月";

      let D = date.getDate() + "日";

      return Y + M + D; //时分秒可以根据自己的需求加上
    },
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(w / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      
      return y;
    },
  },
  watch: {
    comment() {
      this.comment.forEach((item) => {
        this.flgData.push({ cid: item.commentId, flg: item.liked });
        // console.log(this.flgData)
      });
    },
    mvId(){ 
       getMvData({
      mvid: this.mvId,
    }).then((data) => {
      console.log(data);
      this.mvData = data.data;
    });
    getMvUrl({
      id: this.mvId,
    }).then((data) => {
      //   console.log(data);
      this.mvUrl = data.data;
    });
    getMvList({
      mvid: this.mvId,
    }).then((data) => {
      console.log(data);
      this.mvList = data.mvs;
    });
    getInfo({ mvid: this.mvId }).then((data) => {
      console.log(data);
      this.flg2 = data.liked;
    });
    getComment({ id: this.mvId }).then((data) => {
      console.log(data);
      this.comment = data.comments;
    });
    }
  },
};
</script>

<style lang="less">
.mv {
  position: relative;
  .comment{
    position: relative;
  }
  .icon-arrow-left-bold {
    font-size: 24px;
    position: absolute;
    left: 0;
    z-index: 1;
    color: #fff;
  }
  .img-name {
    display: flex;
    align-items: center;
    margin: 16px;
    .img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .name{
      margin-left: 20px;
      color: rgb(32, 30, 30);
      font-weight: 400px;
    }
  }
  .nav {
    margin: 16px;
  }
  .time-play {
    margin: 16px;
    span {
      color: #ccc;
      font-size: 15px;
      margin-right: 20px;
    }
  }
  .btn {
    margin: 16px;
    span {
      font-size: 15px;
      padding: 3px 10px;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-radius: 10px;
    }
  }
  .mv-list {
    margin: 0;
    .img {
      width: 80px;
      height: 80px;
      margin-right: 20px;
      border-radius: 6px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom {
    position: fixed;
    bottom: 0;
    height: 50px;
    border-top: 1px solid #ccc;
    background-color: #f2f3f5;
    width: 100%;
    /* margin: 20px 0; */
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    .btn-text {
      // background-color: rgb(153, 147, 147);
      border-radius: 6px;
    padding: 10px;
    color: rgb(77, 72, 72);
    }
    .int {
      height: 50px;
      width: 250px
    }
    input {
      height: 100%;
      width: 100%;
      background-color: rgb(241, 241, 241);
      border: none;
    }
    span {
      font-size: 16px;
      height: 50px;
      line-height: 50px;
      color: rgb(95, 93, 93);
    }
  }
  ul {
    padding: 10px;
    li {
      display: flex;
      margin: 10px 0;
      .text {
        width: 100%;
      }
      .title {
        display: flex;
        justify-content: space-between;
        .name {
          color: rgb(123, 123, 123);
          font-size: 16px;
        }
        .time {
          color: rgb(123, 123, 123);
          font-size: 12px;
        }
        .zan {
          font-size: 14px;
          color: rgb(123, 123, 123);
        }
      }
      .img {
        width: 50px;
        height: 50px;
        margin-right: 5px;
        border-radius: 50%;
        background-color: red;
        flex-shrink: 0;
        overflow: hidden;
      }
      .comm {
        margin-top: 10px;
        border-bottom: 1px solid #ccc;
        .t1 {
          font-size: 15px;
          color: #4d4c4c;
        }
        .t2 {
          font-size: 14px;
          margin: 5px;
          color: rgb(110, 147, 189);
        }
      }
    }
  }
}
</style>